import 'package:flutter/material.dart';
import 'package:flutter_yn_goods/base/widget/base_list_more_get_builder.dart';
import 'package:flutter_yn_goods/config/app_color.dart';
import 'package:flutter_yn_goods/config/app_translations.dart';
import 'package:flutter_yn_goods/pages/goods_info/comment_list/model/model_comment_list.dart';
import 'package:flutter_yn_goods/widgets/appbar/common_app_bar.dart';
import 'package:flutter_yn_goods/widgets/empty_view.dart';
import 'package:get/get.dart';
import 'package:pull_to_refresh/pull_to_refresh.dart';

import 'comment_list_logic.dart';

class CommentListPage extends StatelessWidget {
  final logic = Get.put(CommentListLogic());

  @override
  Widget build(BuildContext context) {
    return BaseListMoreGetBuilder<CommentListLogic>(
      appBar: CommonAppBar(
        title: LocaleKeys.reviews.tr,
      ),
      builder: (logic) {
        return ListView.separated(
            padding: const EdgeInsets.symmetric(horizontal: 16),
            itemCount: logic.list.length,
            separatorBuilder: (context, index) => const Divider(
                  height: 1,
                  color: AppColor.colorEBECF1,
                ),
            itemBuilder: (context, index) {
              final item = logic.list[index] as ModelCommentList;
              return _buildCommentItem(item);
            });
      },
    );
  }

  // // 顶部筛选条件
  // Widget _buildFilterHeader() {
  //   return Container(
  //     padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 10),
  //     decoration: const BoxDecoration(
  //       color: Colors.white,
  //       border: Border(
  //         bottom: BorderSide(
  //           color: AppColor.colorEBECF1,
  //           width: 0.5,
  //         ),
  //       ),
  //     ),
  //     child: Column(
  //       crossAxisAlignment: CrossAxisAlignment.start,
  //       children: [
  //         Obx(() => Row(
  //               children: [
  //                 Text(
  //                   '${'comment'.tr} (${logic.totalComments})',
  //                   style: const TextStyle(
  //                     fontSize: 16,
  //                     fontWeight: FontWeight.bold,
  //                     color: AppColor.color202020,
  //                   ),
  //                 ),
  //                 const SizedBox(width: 10),
  //                 Text(
  //                   '${'good_rate'.tr}: ${logic.positiveRate}%',
  //                   style: const TextStyle(
  //                     fontSize: 14,
  //                     color: AppColor.colorFF7B02,
  //                   ),
  //                 ),
  //               ],
  //             )),
  //         const SizedBox(height: 10),
  //         SingleChildScrollView(
  //           scrollDirection: Axis.horizontal,
  //           child: Obx(() => Row(
  //                 children: [
  //                   _filterChip(0, 'all'.tr, logic.totalComments.value),
  //                   _filterChip(1, 'good'.tr, logic.goodComments.value),
  //                   _filterChip(2, 'medium'.tr, logic.normalComments.value),
  //                   _filterChip(3, 'bad'.tr, logic.badComments.value),
  //                   _filterChip(4, 'with_pic'.tr, logic.withPicComments.value),
  //                 ],
  //               )),
  //         ),
  //       ],
  //     ),
  //   );
  // }
  //
  // // 筛选标签
  // Widget _filterChip(int type, String label, int count) {
  //   return Obx(() {
  //     final isSelected = logic.currentFilter.value == type;
  //     return GestureDetector(
  //       onTap: () => logic.changeFilter(type),
  //       child: Container(
  //         margin: const EdgeInsets.only(right: 10),
  //         padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
  //         decoration: BoxDecoration(
  //           color: isSelected
  //               ? AppColor.primary.withOpacity(0.1)
  //               : AppColor.colorF5F5F5,
  //           borderRadius: BorderRadius.circular(15),
  //           border: Border.all(
  //             color: isSelected ? AppColor.primary : AppColor.colorF5F5F5,
  //             width: 1,
  //           ),
  //         ),
  //         child: Text(
  //           '$label($count)',
  //           style: TextStyle(
  //             fontSize: 12,
  //             color: isSelected ? AppColor.primary : AppColor.color666666,
  //           ),
  //         ),
  //       ),
  //     );
  //   });
  // }
  //
  // // 评论项
  Widget _buildCommentItem(ModelCommentList item) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // 用户信息
          Row(
            children: [
              ClipOval(
                child: item.avatar != null && item.avatar!.isNotEmpty
                    ? Image.network(
                        item.avatar!,
                        width: 40,
                        height: 40,
                        fit: BoxFit.cover,
                        errorBuilder: (context, error, stackTrace) {
                          return Container(
                            width: 40,
                            height: 40,
                            color: AppColor.colorEBECF1,
                            child: const Icon(Icons.person, color: Colors.grey),
                          );
                        },
                      )
                    : Container(
                        width: 40,
                        height: 40,
                        color: AppColor.colorEBECF1,
                        child: const Icon(Icons.person, color: Colors.grey),
                      ),
              ),
              const SizedBox(width: 10),
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      item.nickname ?? 'anonymous'.tr,
                      style: const TextStyle(
                        fontSize: 14,
                        fontWeight: FontWeight.w500,
                        color: AppColor.color202020,
                      ),
                    ),
                    const SizedBox(height: 4),
                    Text(
                      item.addTimeText ?? '',
                      style: const TextStyle(
                        fontSize: 12,
                        color: AppColor.color999999,
                      ),
                    ),
                  ],
                ),
              ),
              // 评分展示
              _buildRatingStars(item.productScore ?? 5),
            ],
          ),
          const SizedBox(height: 12),

          // 评论内容
          if (item.comment != null && item.comment!.isNotEmpty)
            Text(
              item.comment!,
              style: const TextStyle(
                fontSize: 14,
                color: AppColor.color202020,
                height: 1.5,
              ),
            ),

          // 评论图片
          if (item.pics != null && item.pics!.isNotEmpty) ...[
            const SizedBox(height: 12),
            _buildCommentImages(item.pics!),
          ],

          // 商家回复
          if (item.merchantReply != null && item.merchantReply!.isNotEmpty) ...[
            const SizedBox(height: 12),
            Container(
              padding: const EdgeInsets.all(12),
              decoration: BoxDecoration(
                color: AppColor.colorF5F5F5,
                borderRadius: BorderRadius.circular(4),
              ),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    'merchant_reply'.tr,
                    style: const TextStyle(
                      fontSize: 12,
                      fontWeight: FontWeight.w500,
                      color: AppColor.color666666,
                    ),
                  ),
                  const SizedBox(height: 6),
                  Text(
                    item.merchantReply!,
                    style: const TextStyle(
                      fontSize: 13,
                      color: AppColor.color666666,
                      height: 1.5,
                    ),
                  ),
                ],
              ),
            ),
          ],
        ],
      ),
    );
  }

  // 评分星星
  Widget _buildRatingStars(int score) {
    return Row(
      children: List.generate(5, (index) {
        return Icon(
          index < score ? Icons.star : Icons.star_border,
          color: index < score ? AppColor.colorFFAE4A : AppColor.colorCFD2D9,
          size: 16,
        );
      }),
    );
  }

  // 评论图片
  Widget _buildCommentImages(List<String> images) {
    return SizedBox(
      height: 80,
      child: ListView.builder(
        scrollDirection: Axis.horizontal,
        itemCount: images.length,
        itemBuilder: (context, index) {
          return GestureDetector(
            onTap: () {
              // 图片查看器
              // TODO: 实现图片查看功能
            },
            child: Container(
              width: 80,
              height: 80,
              margin: const EdgeInsets.only(right: 8),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(4),
                border: Border.all(
                  color: AppColor.colorEBECF1,
                  width: 0.5,
                ),
              ),
              child: ClipRRect(
                borderRadius: BorderRadius.circular(4),
                child: Image.network(
                  images[index],
                  fit: BoxFit.cover,
                  errorBuilder: (context, error, stackTrace) {
                    return Container(
                      color: AppColor.colorF5F5F5,
                      child: const Icon(Icons.image_not_supported,
                          color: AppColor.color999999),
                    );
                  },
                ),
              ),
            ),
          );
        },
      ),
    );
  }
}
